<template>
  <div class="search-bar">
    <el-form :inline="true" :model="formItem" size="mini" class="form-filter" :disabled="inactive">
      <el-form-item label="">
        <el-input
          v-model="formItem.s_kw"
          placeholder="请输入关键字..."
          clearable
          @keyup.enter.native="search"
          @change="onMixedInputChange"
        />
      </el-form-item>
      <el-form-item>
        <el-button plain icon="el-icon-search" title="搜索" @click="search" />
        <el-button type="text" icon="el-icon-download" title="下载结果" @click="exportExcel">下载结果</el-button>
        <el-button type="text" icon="el-icon-download" title="下载Excel模板" @click="exportTpl">下载Excel模板</el-button>
        <el-upload
          :headers="uploadHeaders"
          :action="uploadUrl"
          :on-success="handleSuccess"
          :show-file-list="false"
          style="display: inline-block; margin-left: 10px;"
        >
          <el-button type="text" icon="el-icon-upload2" title="上传Excel数据">上传Excel数据</el-button>
        </el-upload>
        <el-button type="text" size="mini" icon="el-icon-delete" title="删除" style="margin-left: 10px;" @click="remove">删除</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { getToken } from '@neu/biz-core/utils/auth'
import { upload } from '@neu/cmdb-ui/api/instance'
// 定义一个查询表单原始项
const formItem = {
  s_kw: ''
}

export default {
  name: 'SchemasTableFilter',
  props: {
    inactive: {
      type: Boolean,
      default: true
    },
    kw: {
      type: String,
      default: ''
    },
    schemaId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      formItem: { ...formItem, s_kw: this.kw }
    }
  },
  computed: {
    uploadHeaders: function() {
      return {
        'Authentication': getToken()
      }
    },
    uploadUrl: function() {
      return upload(this.schemaId)
    }
  },
  methods: {
    // 复合型输入框 input 值改变事件
    onMixedInputChange(value) {
      if (value !== '') {
        this.search()
      }
    },
    // 查询按钮点击事件处理
    search: function() {
      this.$emit('on-filter', this.formItem)
    },
    onChange: function(val) {
      this.$parent.onResize()
    },
    exportExcel() {
      this.$emit('on-export', this.formItem)
    },
    exportTpl() {
      this.$emit('on-download-tpl')
    },
    handleSuccess(response) {
      if (response.status === 'failure') {
        this.$emit('on-import-error', response.data)
      } else {
        this.$emit('on-import-success')
      }
    },
    remove() {
      this.$emit('batch-remove')
    }
  }
}
</script>
